<template>
    <div class="ipo">
        <el-carousel
            height="400px"
            indicator-position="outside"
            arrow="always"
            style="margin:0px 50px;"
        >
            <el-carousel-item v-for="item in pics" :key="item.id">
                <div>
                    <img
                        :src="item.imgurl"
                        alt="图片走丢了"
                        style="height:100%;width:100%;"
                    />
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="good">
            <shelf :title="mes"></shelf>
        </div>
    </div>
</template>
<script>
import shelf from "../components/shelf";

export default {
    data() {
        return {
            mes: "推荐首页",
            pics: [
                {
                    id: 0,
                    imgurl: require("../assets/img/h003.jpg"),
                },
                {
                    id: 1,
                    imgurl: require("../assets/img/h002.jpg"),
                },
                {
                    id: 2,
                    imgurl: require("../assets/img/h001.jpg"),
                },
            ],
        };
    },
    methods: {},
    components: {
        shelf,
    },
};
</script>
<style lang="scss" scoped>
.ipo {
    min-width: 1200px;
}

.good {
    position: relative;
    padding: 0 50px;
    margin-top: 30px;
}
</style>
